<template>
  <div>
    <div class="review-opinions">
        <a-form ref="form" :form="form" >
            <a-form-item>
                <div style="display: flex;justify-content: space-between;align-items: center;">
                    <div>
                        <span style="margin-left: 10px">常用意见：</span>
                        <a-button @click="selecToftenUse('同意')" size="small" class="yj-btn" style="margin: 0 8px;">同意</a-button>
                        <a-button @click="selecToftenUse('不同意')" size="small" class="yj-btn">不同意</a-button>
                        <a-button @click="selecToftenUse('已阅')" size="small" class="yj-btn" style="margin: 0 8px;">已阅</a-button>
                        <a-button @click="selecToftenUse()" size="small" class="yj-btn" icon="ellipsis" style="width: 32px;"></a-button>
                    </div>
                    <a-button @click="addOpinion" size="small" icon="plus">添加到常用意见</a-button>
                </div>
                <a-textarea
                    v-model:value="formState.opinion"
                    v-decorator="['opinion',{ initialValue:formState.opinion, rules: rules.opinion}]"
                    placeholder="请输入办理意见"
                    :autosize="{ minRows: 3, maxRows: 10000 }"
                    @change="textareaChange"
                    style="font-size: 16px;font-weight: 600;"
                ></a-textarea>
            </a-form-item>
        </a-form>
        <a-drawer
            title="常用意见"
            placement="right"
            :closable="false"
            :visible="drawerVisible"
            @close="drawerVisible = false"
            :width="300"
            >
                <div>
                    <a-input-search
                        :key="inputSearchKey"
                        placeholder="请输入内容"
                        enter-button="搜索"
                        size="small"
                        @search="onSearchOpinion"
                    />
                </div>
                <a-list :data-source="opinionsList" :loading="loading">
                    <a-list-item slot="renderItem" slot-scope="item, index">
                        <div @click="selelctOptitonText(item.fcontent)">{{ item.fcontent }}</div>
                        <div slot="actions">
                            <a-icon @click="deleteOpinion(item)" type="delete" />
                        </div>
                    </a-list-item>
                </a-list>
            </a-drawer>
    </div>
  </div>
</template>
<script>
import {
  handlingOpinionsListServe,
  deleteBatchIdeaServe,
  addBatchIdeaServe,
} from './service/index'
export default {
  components:{

  },
  props:{

  },
  data(){
      return{
          drawerVisible:false,
          inputSearchKey:null,
          loading:false,
          opinionsList:[],
          opinionsData:{
              title:'办理意见',
              opinion:'',
              valueData:{},//填写完意见后获取意见到页面后方法返回的第二个参数
              opinionType:'',//意见类型
          },
          submitModalData:{},
          formState:{opinion:''},
          form: this.$form.createForm(this, { name: 'processingConditionsFromName' }),
          rules:{
              opinion: [{
                  required: true,
                  message: '请输入办理意见',
                  trigger: 'blur',
              }],
          },
      }
  },
  watch:{

  },
  mounted(){
      this.submitModalData = JSON.parse(JSON.stringify(this.opinionsData))
      //console.log('88888888')
      this.$emit('openOpinions')
  },
  methods:{
      getData(val){
          this.submitModalData = {...JSON.parse(JSON.stringify(this.opinionsData)),...val}
          this.formState.opinion = this.submitModalData.opinion
          this.form.setFieldsValue({
              opinion:this.submitModalData.opinion
          });
          this.formState.opinion = val.oldVal
          this.form.setFieldsValue({
              opinion: this.formState.opinion
          });
      },
      selecToftenUse(val){
          if(val){
              this.form.setFieldsValue({
                  opinion:val,
              });
              this.formState.opinion = val
              this.handleOk()
          }else{
              this.inputSearchKey = Date.now()
              this.drawerVisible = true
              this.getOpinionList(this.submitModalData)

          }
      },
      onSearchOpinion(val){
          //console.log('搜索内容',val)
          this.getOpinionList(this.submitModalData,val)
      },
      getOpinionList(val,content){
          this.loading = true
          let data = {}
          if(content){
              data = {ftype1:val.opinionType,pageNo:1,pageSize:100000,fcontent:content}
          }else{
              data = {ftype1:val.opinionType,pageNo:1,pageSize:100000}
          }
          handlingOpinionsListServe(data).then(res=>{
              if(res.code == 200){
                  this.opinionsList = res.result.records
              }
              this.loading = false
          })
      },
      addOpinion(){
          if(this.formState.opinion){
              addBatchIdeaServe({ftype1:this.submitModalData.opinionType,fcontent:this.formState.opinion}).then(res=>{
                  if(res.code == 200){
                      this.$message.success(res.message)
                  }else{
                      this.$message.warning(res.message)
                  }
              })
          }else{
              this.$message.warning('当前输入框无内容')
          }
      },
      deleteOpinion(val){
          deleteBatchIdeaServe({ids:val.id}).then(res=>{
              if(res.code == 200){
                  this.getOpinionList(this.submitModalData)
                  this.$message.success(res.message)
              }else{
                  this.$message.warning(res.message)
              }
          })
      },
      selelctOptitonText(val){
          this.formState.opinion = val
          this.form.setFieldsValue({
              opinion:val
          });
          this.drawerVisible = false
      },
      textareaChange(){
        //console.log('2222222',this.formState.opinion,this.formState.opinion.length)
        // if(this.formState.opinion.length == 0){
            this.$emit('getInputOpinion','',{opinionType:this.submitModalData.opinionType,...this.submitModalData.valueData})
        // }
        this.form.setFieldsValue({
            opinion: this.formState.opinion
        });
        this.handleOk()
      },
      handleOk(){
          this.form.validateFields((err, values) => {
              if(!err){
                  this.$emit('getInputOpinion',values.opinion,{opinionType:this.submitModalData.opinionType,...this.submitModalData.valueData})
              }
          })

      },
  }
}
</script>
<style lang="less">
.review-opinions {
  font-family: '微软雅黑';
  form .ant-mentions, form textarea.ant-input {
    margin-bottom: 0px;
  }
  .yj-btn {
    color: #2F54EB;
    border-radius: 3px;
  }
  .ant-form-item {
    width: 100%;
  }
}
</style>
